<template>
  <div class="page-container">
    <h1>查询所有反馈</h1>

    <!-- 反馈列表 -->
    <el-table :data="feedbacks" style="width: 100%" stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="reply" label="回复"></el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            v-if="scope.row.status === 0"
            @click="openReplyDialog(scope.row)"
          >
            回复
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 回复反馈对话框 -->
    <el-dialog title="回复反馈" v-model="dialogVisible" width="50%">
      <el-form :model="replyForm" label-width="80px">
        <el-form-item label="内容">
          <el-input v-model="replyForm.content" disabled></el-input>
        </el-form-item>
        <el-form-item label="回复">
          <el-input
            v-model="replyForm.reply"
            type="textarea"
            rows="4"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "@/api";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";

const feedbacks = ref([]);
const dialogVisible = ref(false);
const replyForm = ref({
  reply: "",
});
async function fetchFeedbacks() {
  try {
    const response = await api.feedback.getFeedbackList({
      status: "",
      userId: "",
      page: 1,
      size: 10,
    });
    feedbacks.value = response.data.data;
    console.log(response.data.data);
  } catch (error) {
    console.error("Failed to fetch feedbacks:", error);
    ElMessage.error(error.response?.data?.message || "获取反馈失败");
  }
}

onMounted(() => {
  fetchFeedbacks();
});

function openReplyDialog(feedback) {
  replyForm.value.id = feedback.id;
  replyForm.value.content = feedback.content;
  replyForm.value.reply = feedback.reply || "";
  dialogVisible.value = true;
}

function getCurrentTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

async function submitReply() {
  if (!replyForm.value.reply) {
    ElMessage.warning("请填写回复内容");
    return;
  }
  const userStore = useUserStore();
  console.log(userStore);
  try {
    const response = await api.feedback.replyFeedback(replyForm.value.id, {
      reply:
        userStore.userInfo.nickname +
        "|" +
        getCurrentTime() +
        "|" +
        replyForm.value.reply,
    });
    console.log(response);
    if ((response.code = 200)) {
      dialogVisible.value = false;
      fetchFeedbacks(); // 刷新列表
      ElMessage.success("回复成功");
    } else {
      ElMessage.error("回复失败");
    }
  } catch (error) {
    console.error("回复失败:", error);
    ElMessage.error(error.response?.data?.message || "回复失败");
  }
}

function getStatusText(status) {
  switch (status) {
    case 0:
      return "未回复";
    case 1:
      return "已回复";
    default:
      return "未知状态";
  }
}

function getStatusTagType(status) {
  switch (status) {
    case 0:
      return "warning";
    case 1:
      return "success";
    default:
      return "";
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.el-table th {
  background-color: #f5f7fa;
}

.el-table__row {
  height: 48px;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
